<template>
    <div>
        <el-dialog
            v-model="dialogVisible"
            title="广告点击统计"
            width="800"
        >
            <div class="mb-[16px]">
                <el-form ref="formRef" :model="queryParams" :inline="true">
                    <el-form-item label="日期范围">
                        <div class="date-inp">
                            <daterange-picker
                                type="daterange"
                                valueFormat="YYYY-MM-DD"
                                v-model:startTime="queryParams.start_time"
                                v-model:endTime="queryParams.end_time"
                            />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="resetPage">查询</el-button>
                        <el-button @click="resetParams('banner_id')">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                    <el-table-column label="ID" prop="banner_id" min-width="90"/>
                    <el-table-column label="名称" prop="name" min-width="120"/>
                    <el-table-column label="日期" prop="dates" min-width="120"/>
                    <el-table-column label="点击数" prop="click_num" min-width="120"/>
                    <el-table-column label="曝光数" prop="show_num" min-width="120"/>
                </el-table>
            </div>
            <div class="flex justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import {usePaging} from '@/hooks/usePaging'
import { bannerStatitics } from '@/api/resource';
const dialogVisible = ref(false);
const queryParams = reactive({
    banner_id: 0,
    start_time: '',
    end_time: ''
})
const init = (id:number) => {
    console.log('init')
    dialogVisible.value = true;
    console.log(dialogVisible.value)
    queryParams.banner_id = id;
    getLists()
}
const {pager, getLists, resetPage, resetParams} = usePaging({
  fetchFun: bannerStatitics,
  params: queryParams,
  size: 10,
})

defineExpose({
    init
})
</script>
<style lang="scss" scoped>
.date-inp{
	::v-deep .el-range-editor.el-input__wrapper{
		width: 280px;
	}
}
</style>